<template>
  <div class="registerDom">
    <div class="register-big"></div>
    <div class="register-form">
      <h2 class="register-title">找回密码</h2>
      <el-form ref="registerForm" :model="sizeForm" size="mini" :rules="registerRules">
        <el-form-item prop="phone">
          <el-tooltip class="item" effect="dark" content="请输入手机号码" placement="right-end" popper-class="popperClass">
            <el-input v-model.trim="sizeForm.phone" placeholder="请输入手机号码"></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="Verification" class="parent">
          <el-tooltip class="item" effect="dark" content="请输入验证码" placement="right-end" popper-class="popperClass">
            <el-input v-model.trim="sizeForm.Verification" placeholder="请输入验证码"  />
          </el-tooltip>
          <el-button class="verify-btn" type="primary" @click="validationText">{{ validation }}</el-button>
        </el-form-item>
        <el-form-item prop="password">
          <el-tooltip class="item" effect="dark" placement="right-end" popper-class="popperClass">
            <div slot="content">长度为6-20个字符</div>
            <!-- <br/>至少包含大小写字母、数字及特殊字符中的两种<br/>不能与用户名相同 -->
            <el-input v-model.trim="sizeForm.password" type="password" show-password placeholder="请输入您的密码"></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="passwordAgain">
          <el-tooltip class="item" effect="dark" content="请再次输入您的密码" placement="right-end" popper-class="popperClass">
            <el-input v-model.trim="sizeForm.passwordAgain" type="password" show-password
              placeholder="请再次输入您的密码"></el-input>
          </el-tooltip>
        </el-form-item>
        <el-button type="primary" class="primary" @click="changePassword">确认</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { changePasswordRequest, retrieveCodeRequest } from '@/api/login'
export default {
  name: 'BaiaoweifanUiRegister',

  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.sizeForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    }
    return {
      //注册
      sizeForm: {
        phone: '',
        Verification: '',
        password: '',
        passwordAgain: '',
      },
      timer: null,
      validation: '发送验证码',
      countdown: 60,
      registerRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/, message: '请输入正确的手机号码', trigger: ['blur'] }
        ],
        Verification: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /^[0-9]{6}$/, message: '请输入6位验证码', trigger: ['change', 'blur'] }
        ],
        password: [
          { required: true, message: '请输入您的密码', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_]{6,20}$/, message: '密码长度为6-20位', trigger: ['change', 'blur'] },
        ],
        passwordAgain: [
          { required: true, message: '请输入再次您的密码', trigger: 'blur' },
          // { pattern:/^[a-zA-Z0-9_]{6,20}$/, message: '密码长度为6-20位', trigger: ['change','blur'] },
          { required: true, validator: validatePass, trigger: ['change', 'blur'] },
        ]
      }
    };
  },

  mounted() {

  },

  methods: {
    //验证码校验
    validationText() {
      if (!this.timer) {
        this.$refs['registerForm'].validateField(['phone'], async err => {
          if (!err) {
            try {
              const res = await retrieveCodeRequest({ mobilePhone: this.sizeForm.phone })
              if (res.code !== 200) return this.$message({
                message: res.message,
                type: 'warning'
              })
              this.validation = `60s后重新发送`;
              this.timer = setInterval(() => {
                if (this.countdown > 0 && this.countdown <= 60) {
                  this.countdown--;
                  if (this.countdown !== 0) {
                    this.validation = `${this.countdown}s后重新发送`;
                  } else {
                    clearInterval(this.timer);
                    this.validation = "重新发送";
                    this.countdown = 60;
                    this.timer = null;
                    this.codeDisabled = false;
                  }
                }
              }, 1000)
            } catch (error) {
              this.$message.error('系统错误，请联系管理员！')
            }
          }
        })
      }
    },
    //修改密码
    changePassword() {
      this.$refs['registerForm'].validate(async res => {
        try {
          const result = await changePasswordRequest({
            mobilePhone: this.sizeForm.phone,
            validCode: this.sizeForm.Verification,
            password: this.sizeForm.password
          })
          if (result.code !== 200) return this.$message({
            message: result.message,
            type: 'warning'
          })
          this.$message({
            message: '密码修改成功！',
            type: 'success'
          });
          this.$emit('showForgot', 'login');
        } catch (error) {
          this.$message.error('系统错误，请联系管理员！')
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
$bg: #fff;



.registerDom {
  // position: relative;
  width: 100%;
  height: 100%;

  .register-big {
    width: 100%;
    height: 100%;
    // background: url(../../../assets/retrieve.png) no-repeat 50%;
  }

  .register-form {
    position: absolute;
    top: 10%;
    right: 35%;
    width: 600px;
    height: 700px;
    background-color: $bg;
    border-radius: 5px;
    padding: 60px 120px 80px;

    .register-title {
      // color: $themeTopToolColor;
      // text-align: center;
      padding: 12px 0;
      font-weight: 400;
    }

    .flexCheck {
      display: flex;
    }

    .agreement {
      color: $themeTopToolColor;
      margin-left: 2px;
      font-size: 10px;
    }

    .parent{
    position:relative;
    .verify-btn {
      // background: linear-gradient(90deg, $themeTopToolColor, $themeTopToolColor);
      background-color:transparent;
      position:absolute;
      top:0;
      right:0;
      border:0;
      color: $themeTopToolColor;
      float: right;
      font-weight: 700;
      height: 38px;
      border-radius: 5px;
      width: 125px;
    }
  }

    .primary {
      border:0;
      background: linear-gradient(90deg, $themeTopToolColor, $themeTopToolColor);
      width: 60%;
      height: 48px;
      border-radius: 24px;
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translateX(-50%);

      &:hover {
        background: linear-gradient(90deg, $themeTopToolColor, $themeTopToolColor);
      }
    }

    ::v-deep .el-input--mini {
      .el-input__inner {
        height: 38px;
        line-height: 38px;
        border-radius: 5px;

        &::placeholder {
          color: #666;
        }
      }
    }
  }

  .clues {
    width: 350px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    font-size: 10px;
    position: absolute;
    bottom: 1%;
    text-align: center;

    div {
      width: 46px;
      height: 1px;
      background-color: #ccc;
    }
  }

  .agreementReading {
    width: 100%;
    height: 500px;
    padding: 20px;
    overflow-y: scroll;
  }
}
</style>